<template>
  <div class="title clearfix"
       id="navhead">
    <a href="index.html">
      <img src="/static/img/u1.png">
      <span>
        <em>海军战斗文化</em>研练系统</span>
    </a>
    <div class="nav">
      <span class="placeholder"></span>
      <Menu mode="horizontal"
            active-name="1"
            @on-select="select">
        <MenuItem name="1">
        <span class="item"
              @click="goHome">首页</span>
        </MenuItem>
        <MenuItem name="2">
        <Anchor v-if="showAnchor"
                :affix="false">
          <AnchorLink href="#interaction"
                      title="教学直播交互" />
        </Anchor>
        <span v-else
              class="item"
              @click="interaction">教学直播交互</span>
        </MenuItem>
        <MenuItem name="3">
        <span class="item"
              @click="goCaseTraining">案例联席研练</span>
        </MenuItem>
        <MenuItem name="4"
                  v-if="hasGetInfo">
        <span class="item"
              @click="goEvaluation">教学评价</span>
        </MenuItem>
        <MenuItem name="5">
        <Anchor v-if="showAnchor"
                :affix="false">
          <AnchorLink href="#dibbling"
                      title="资源点播" />
        </Anchor>
        <span v-else
              class="item"
              @click="dibbling">资源点播</span>
        </MenuItem>
      </Menu>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      showAnchor: false
    }
  },
  computed: {
    ...mapState({
      roleId: state => state.user.roleId,
      hasGetInfo: state => state.user.hasGetInfo,
    })
  },
  methods: {
    // 回到首页
    goHome () {
      this.$router.push({ name: 'home' })
    },
    // 资源点播
    dibbling () {
      this.$router.push({ name: 'home', hash: '#dibbling' })
    },
    // 教学直播交互
    interaction () {
      this.$router.push({ name: 'home', hash: '#interaction' })
    },
    // 教学评价
    goEvaluation () {
      this.$router.push({ name: 'evaluation' })
    },
    // 案例练习演练
    goCaseTraining () {
      this.$router.push({ name: 'home', hash: '#case-training' })
      // if (this.roleId == '1') {
      //   this.$router.push({ path: '/case-training' })
      // } else {
      //   this.$Message.warning('没有权限访问该页面')
      // }
    },
    select () { }
  },
  watch: {
    $route (newName, oldName) {
      if (newName.name === 'home') {
        this.showAnchor = true
      } else {
        this.showAnchor = false
      }
    }
  }
}
</script>
<style lang="scss">
.main-nav {
  position: relative;
  padding-top: 80px;
  padding-bottom: 30px;
  background: #e8ebf2;
}
#navhead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #020623;
  box-shadow: 0 0 10px #000;
  a {
    display: inline-flex;
    height: 40px;
    line-height: 40px;
    margin-left: 1vw;
    vertical-align: middle;
    img {
      height: 30px;
      margin-top: 5px;
      margin-right: 15px;
    }
    span {
      letter-spacing: 2px;
      font-size: 18px;
      color: #fff;
    }
  }
  .nav {
    height: 100%;
    float: right;
    vertical-align: middle;
    overflow: hidden;
    .ivu-menu-horizontal.ivu-menu-light:after{
      height: 0;
    }
    .ivu-menu {
      display: inline-block;
      vertical-align: middle;
      .ivu-menu-item {
        font-size: 0;
        .item {
          font-size: 14px;
        }
        & > div {
          display: inline-block;
          vertical-align: middle;
          .ivu-anchor {
            .ivu-anchor-ink {
              display: none;
            }
            .ivu-anchor-link {
              padding: 0;
              font-size: 14px;
              &::before {
                background: #fff;
              }
            }
          }
        }
        .ivu-btn {
          font-size: 14px;
          padding: 0;
        }
      }
    }
  }
}
</style>



